<style scoped>
/* table */
.table {
  margin: 0 5% 50px 5%;
  border: 1px solid #000;
}
.table-header,
.table-footer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 50px;
  background-color: #f0f0f0;
}
.table-footer {
  text-align: center;
}
.table-header-day {
  margin-right: 50px;
}

</style>

<template>
     <div class="wrap">
         <!-- table -->
    <div v-for="(table,index) in tables" :key="index" class="table">
      <div class="table-header">
        <span class="table-header-day">{{table.date}}</span>
        <span class="table-header-week">{{table.week}}</span>
      </div>
      <el-table :data="table.tableData" border style="width: 100%">
        <el-table-column align="center" label="行程时间" prop="time" width="234"></el-table-column>
        <el-table-column align="center" label="行程主题" prop="theme" width="234"></el-table-column>
        <el-table-column align="center" label="主导领导" prop="leader" width="234"></el-table-column>
        <el-table-column align="center" label="行程地点" prop="addr" width="234"></el-table-column>
        <el-table-column align="center" label="负责人" prop="principal" width="234"></el-table-column>
        
        <el-table-column align="center" label="审批状态" prop="state" width="234">
          <template slot-scope="scope">
            <el-button type="danger" v-if="scope.row.state==='0'">审核中</el-button>
            <el-button type="warning" v-else-if="scope.row.state==='1'">待审核</el-button>
            <el-button type="success" v-else>已通过</el-button>
          </template>
        </el-table-column>
       
        <el-table-column align="center" label="操作" prop="operation" width="234">
          <template slot-scope="scope">
            <el-button>{{scope.row.operation}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-footer">
        <span @click="createSchedule" class="hand">
          <i class="el-icon-plus"></i>
          新建行程
        </span>
      </div>
    </div>
     </div>
</template>
   
<script>

export default {
  data() {
    return {
      value7: "",
      tables: [
        {
          date: "2018年12月18日",
          week: "星期二",
          tableData: [
            {
              time: "10:00-10.30",
              theme: "与中央电视台记者交流汽车",
              leader: "李总、王总、总部各部门领导",
              addr: "湖北省武汉市-集团总部",
              principal: "李宗",
              state: "0",
              operation: "..."
            },
            {
              time: "10:00-10.30",
              theme: "与中央电视台记者交流汽车",
              leader: "李总、王总、总部各部门领导",
              addr: "湖北省武汉市-集团总部",
              principal: "李宗",
              state: "1",
              operation: "..."
            }
          ]
        },
        {
          date: "2018年12月19日",
          week: "星期三",
          tableData: [
            {
              time: "10:00-10.30",
              theme: "与中央电视台记者交流汽车",
              leader: "李总、王总、总部各部门领导",
              addr: "湖北省武汉市-集团总部",
              principal: "李宗",
              state: "2",
              operation: "..."
            }
          ]
        },
        {
          date: "2018年12月20日",
          week: "星期四",
          tableData: [
            {
              time: "10:00-10.30",
              theme: "与中央电视台记者交流汽车",
              leader: "李总、王总、总部各部门领导",
              addr: "湖北省武汉市-集团总部",
              principal: "李宗",
              state: "0",
              operation: "..."
            }
          ]
        }
      ],
      form: {
        leader: "",
        business: "",
        schedule: "",
        region: "",
        keyword: ""
      }
      
    }
  },

  activated(){
     
  },
  created() {
  },
  mounted() {


  },
  computed: {

  },
  methods: {
    createSchedule() {
      // :to="{name:'createSchedule'}"
      this.$router.push({
        name: "createSchedule"
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
  }
};
</script>

